<template>
  <div class="bikeng">
      FUfufufufufu
      <Zi :zitext="futext" @nchuanzhi="hddd"/>
      <Zi2>
           <div slot="caokou">父组件槽口插值</div>
      </Zi2>
      <div>
        过滤器：{{filter|guolv}}
      </div>
      <hr>
      <div>
        set应用：id：{{obj.name}}----age:{{obj.age}}
        <p><button @click="set()">点我添加数据</button></p>
      </div>
      <hr>
      <div>
        <input type="text" ref="inputval"><button @click="ival">ref打印输入框值</button>
      </div>
      <div>
        <h3 v-zidingyi>自定义指令</h3>
      </div>
       <div>
           params传参
           <h2 v-for="(v,i) in arr" :key="i" @click="go(v.id)">{{v.title}}</h2>
       </div>
  </div>
</template>

<script>
import Zi from '@/components/home/anli.vue'
import Zi2 from '@/components/home/anli2.vue'
export default {
    data(){
        return {
          futext:"正传值演示",
          filter:"哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
          obj: {
             name: "hudi",
          },
          arr:[
               {id:123456,title:"商品1",content:"商品详情111111"},
               {id:123457,title:"商品2",content:"商品详情222222"},
               {id:123458,title:"商品3",content:"商品详情333333"},
               {id:123459,title:"商品4",content:"商品详情444444"},
               {id:123450,title:"商品5",content:"商品详情555555"},
               {id:123451,title:"商品6",content:"商品详情666666"},
               {id:123452,title:"商品7",content:"商品详情777777"},
           ]
        }
    },
    components:{
        Zi,
        Zi2
    },
    methods:{
        hddd(text){
            console.log(text)
        },
        set(){
          this.$set(this.obj,"age","25")
        },
        ival(){
          console.log(this.$refs.inputval.value)
        },
        go(id){
           this.$router.push({name:"params",params:{news:id}})
        }
    },
    filters:{
       guolv(val){
            if(val.length>6){
                return val.substr(0,5)+"......."
            }else{
                return val
            }      
        }
    },
    directives:{
         zidingyi:{
           inserted(el){
           el.style.color="red";
       }
    }
    },
    beforeCreate(){
      console.log("实例准备创建");
    },
    created(){
      console.log("实例创建完毕");
    },
    beforeMount(){
      console.log("模板准备渲染");
    },
    mounted(){
      console.log("模板渲染完毕");
    },
    beforeUpdate(){
      console.log("开始准备更新");
    },
    updated(){
      console.log("更新完毕");
    },
    beforeDestroy(){
      console.log("开始准备销毁");
    },
    Destroyed(){
      console.log("销毁完毕");
    }
}
</script>

<style scoped>
   .bikeng{
     height: 8rem;
   }
</style>